<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        用户名： <input type="text" id="username"><br>
        密码：  <input type="password" id="password"><br>
        <button>提交</button>
    </div>
    <script>
        let btnEle = document.querySelector("button");
        let usernameEle = document.querySelector("#username");
        let passwordEle = document.querySelector("#password");
        btnEle.onclick = function (){               //先写一个点击事件
            let username = usernameEle.value;       //获取input框我们需要的value值
            let pwd = passwordEle.value;            //获取input框我们需要的value值
            let xhr ;                               //创建ajax

            //兼容性判断
            if( window.XMLHttpRequest ){            //判断当前浏览器是否支持  XMLHttpRequest  类型的  ajax对象
                xhr = new XMLHttpRequest();
            } else {
                xhr = new ActiveXObject();          //如果不支持，就改为   ie浏览器   创建 ajax 对象得模式
            }
            // 打开ajax方式
            //     get   方式打开   ，
            // 目标地址  ../php/get.php  +  ?  +  需要传输的参数 username=${username}&pwd=${pwd}   以键值对的方式    
            // 是否异步传输   true 异步   false同步，   默认为true
            xhr.open("get",`../php/get.php?username=${username}&pwd=${pwd}`,true);  
            xhr.send();                     //发送ajax
            xhr.onload = function (){       //一切准备就绪后，执行函数内容
                let obj = JSON.parse(xhr.responseText);             //获取服务器传输的数据并解析
                if( obj['status'] == 1 ){                           //如果服务器数据对象状态码 status 为  1  表示用户名和密码正确 
                    window.location.href = 'http://www.baidu.com' ; //跳转到我们需要的地址
                } else if(obj['status'] == 0 ){                     //否则
                    window.alert(obj['info']);                      //弹出提示信息
                }   
            }
        }
    </script>
</body>
</html>